<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="cans" width="500" height="500"></canvas>
		<script>
			var cans=document.getElementById('cans');
			var c=cans.getContext('2d');
			
			
			
			function move(){
				c.clearRect(0,0,500,500);
				c.fillStyle='#ccc';
				c.fillRect(0,0,500,500);
				//画圆形框
				c.beginPath();
				c.lineWidth=10;
				c.fillStyle='#eaeaea';
				c.strokeStyle='#2408cc';
				c.arc(250,250,200,0,Math.PI*2);
				c.fill()
				c.stroke();
				c.closePath();
				
				c.save()    //保存原始状态
				
				//画小时刻度
				c.translate(250,250);      //把原点移动到250，250的位置
				for(var i=0;i<12;i++){
					c.rotate(30*Math.PI/180);   //每循环一次都旋转一个角度
					c.fillStyle='mediumvioletred';    //设置数字的颜色
					c.font='24px Arail';              //设置数字的字体样式
					c.fillText(i+1,-8,-150);          //添加数字
					c.beginPath();
					c.lineWidth=5;
					c.moveTo(0,-170);
					c.lineTo(0,-190);
					c.fill();
					c.stroke();
					c.closePath();
				};
				//画分钟的刻度
				for(var i=0;i<60;i++){
					c.rotate(6*Math.PI/180);
					c.beginPath();
					c.lineWidth=4;
					c.moveTo(0,-180);
					c.lineTo(0,-190);
					c.stroke();
				}
				c.restore()     //恢复到原来的状态；
				
				//获取当前时间
				var now=new Date();
				var hour=now.getHours();
				var min=now.getMinutes();
				var sec=now.getSeconds();
				min=min+sec/60;
				hour=hour+min/60;
				console.log(hour+':'+min+':'+sec)
				
				
				//画时针
//				c.save();
//				c.translate(250,250);
//				c.rotate(30*Math.PI/180*hour);
//				c.beginPath();
//				c.strokeStyle='#292832';
//				c.lineWidth=5;
//				c.moveTo(0,15);
//				c.lineTo(0,-100);
//				c.stroke();
//				c.closePath();
//				c.restore();
				
				
				
				c.save();
				c.translate(250,250);
				c.rotate(30*Math.PI/180*hour);
				c.beginPath();
				c.strokeStyle='#453c2a';
				c.lineWidth=4;
				c.moveTo(0,10);
				c.lineTo(0,-110);
				c.stroke();
				c.closePath();
				c.restore();
				
				//画分针
//				c.save();
//				c.translate(250,250);
//				c.rotate(6*Math.PI/180*min);
//				c.beginPath();
//				c.strokeStyle='#292832';
//				c.lineWidth=3;
//				c.moveTo(-15,0);
//				c.lineTo(130,0);
//				c.stroke();
//				c.closePath();
//				c.restore();

				c.save();
				c.translate(250,250);
				c.rotate(6*Math.PI/180*min);
				c.beginPath();
				c.strokeStyle='#453c2a';
				c.lineWidth=3;
				c.moveTo(0,10);
				c.lineTo(0,-130);
				c.stroke();
				c.closePath();
				c.restore();
				
				//画秒针
//				c.save();
//				c.translate(250,250);
//				c.rotate(6*Math.PI/180*sec);
//				c.beginPath();
//				c.strokeStyle='red';
//				c.lineWidth=1;
//				c.moveTo(0,-15);
//				c.lineTo(0,170);
//				c.stroke();
//				c.closePath();
//				c.beginPath()
//				c.fillStyle='#fff';
//				c.arc(0,0,5,0,Math.PI*2);
//				c.fill();
//				c.closePath();
//				c.restore();

				c.save();
				c.translate(250,250);
				c.rotate(6*Math.PI/180*sec);
				c.beginPath();
				c.lineWidth=2;
				c.strokeStyle='#f73703';
				c.moveTo(0,15);
				c.lineTo(0,-160);
				c.closePath();
				c.stroke();
				c.beginPath();
				c.strokeStyle='#f73703';
				c.fillStyle='#fff';
				c.arc(0,0,4,0,Math.PI*2);
				c.fill();
				c.stroke();
				c.restore();
			}
			move();
			setInterval(move,1000);
			
			
			
			
			
		</script>
	</body>
</html>
